<!--
 * @Author: 陈喆龙 3102508773@qq.com
 * @Date: 2023-03-13 21:55:27
 * @LastEditors: 陈喆龙 3102508773@qq.com
 * @LastEditTime: 2023-03-19 15:32:22
 * @FilePath: \vue-project\src\views\Sreach.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from "vue";
import { createApp } from 'vue';
import { areaList } from '@vant/area-data';

const app = createApp();
const show = ref(false);
const show2 = ref(false);
const show3 = ref(false);
const show4 = ref(false);
const value1 = ref(0);
const value2 = ref('a');
const option1 = [
      { text: '综合排序', value: 0 },
      { text: '价格最高', value: 1 },
      { text: '价格最低', value: 2 },
    ];
const option2 = [
      { text: '空调', value: 'a' },
      { text: '壁挂式空调', value: 'b' },
      { text: '中央空调', value: 'd' },
      { text: '移动空调', value: 'e' },
      { text: '天花机', value: 'f' },
      { text: '变频空调', value: 'g' },
      { text: '一级能效', value: 'h' },
      { text: '美的', value: 'i' },
      { text: '华凌', value: 'j' },
    ];
</script>
<template>
    <div>
 <van-search
  v-model="values"
  shape="round"
  background="while"
  placeholder="请输入搜索关键词"
/>

<van-nav-bar>
  <template #right >
    <van-icon name="filter-o"  style="font-size: 14px;color: #666666;"/>
   <div @click="show2 = true" style="font-size: 14px;color: #666666;">筛选</div>
  </template>
  <template #title>
    <div  @click="show = true" style="font-size: 14px; color: #666666;">
      <van-icon name="location-o" color="#666666"/>天河区
    </div>
  </template>
  <template #left>
    <van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
</van-dropdown-menu>
  </template>
</van-nav-bar>

<van-popup v-model:show="show"  round
  position="bottom"
  :style="{ height: '40%' }" >
  <van-area  :area-list="areaList" value="110101" @cancel="show = false"/>
</van-popup>

<van-popup v-model:show="show2"  round
closeable
  close-icon="minus"
  close-icon-position="top-left"
  position="right"
  :style="{ height: '100%' ,width:'85%'}" >
  <van-nav-bar title="筛选" left-text="取消" right-text="确定"> 
</van-nav-bar>
<div @click="show3 = true">商品分类</div>
<van-popup v-model:show="show3"  round
closeable
  close-icon="minus"
  close-icon-position="top-left"
  position="right"
  :style="{ height: '100%' ,width:'100%'}" >
  <van-nav-bar title="商品分类" left-text="取消"> 
  </van-nav-bar>
  <van-dropdown-menu>
 <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
<van-dropdown-menu>
 <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
<van-dropdown-menu>
 <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
 
</van-popup>
</van-popup>



<van-card 
  thumb="https://pic.midea.cn/smartpic/pic/10675d82727c4a1e974689bb40.jpg"
  desc=" 晒单送健康秤MO-CW5,晒单后请及时联系客服兑换哟，赠品不可更换（收货信息以及实物）、不可抵现~~ "
>
<template #tags>
    <van-tag plain type="primary" color="#FF6600">自营</van-tag>
    <van-tag type="primary" color="#FF6600">官方正品</van-tag>
  </template>
  <template #price>
    <div style="flex-direction: column;">
      <div style="font-size: 16px ;color: #FF6600;">1199.00</div>
   <div style="font-size: 12px;color:#A4A4A4">智慧家空调会员店    进店></div>
    </div>
  </template>
  <template #footer>
  </template>
  <template #num>
    评论数
  </template>
  <template #title>
   <div style="font-size: 14px;color: #333333;">美的移动空调单冷家用一体机小1匹KY-15/N7Y-PHA </div>
  </template>
</van-card>
<van-card
thumb="https://pic.midea.cn/smartpic/pic/10675d82727c4a1e974689bb40.jpg"
  desc=" 晒单送健康秤MO-CW5,晒单后请及时联系客服兑换哟，赠品不可更换（收货信息以及实物）、不可抵现~~ "
>
  <template #tags>
    <van-tag plain type="primary" color="#FF6600">自营</van-tag>
    <van-tag type="primary" color="#FF6600">官方正品</van-tag>
  </template>
  <template #price>
    <div style="flex-direction: column;">
      <div style="font-size: 16px ;color: #FF6600;">1299.00</div>
   <div style="font-size: 12px;color:#A4A4A4">智慧家空调会员店    进店></div>
    </div>
  </template>
 
  <template #footer>
   
   
  </template>
 

  <template #num>
    评论数
  </template>
  <template #title>
   <div style="font-size: 14px;color: #333333;">KY-20/N7Y-PHA 移动空调 极地白 美的  </div>
  </template>
 
  
    
</van-card>

<van-card
thumb="https://pic.midea.cn/smartpic/pic/10675d82727c4a1e974689bb40.jpg"
  desc=" 晒单送健康秤MO-CW5,晒单后请及时联系客服兑换哟，赠品不可更换（收货信息以及实物）、不可抵现~~ "
>
  <template #tags>
    <van-tag plain type="primary" color="#FF6600">自营</van-tag>
    <van-tag type="primary" color="#FF6600">官方正品</van-tag>
  </template>
  <template #price>
    <div style="flex-direction: column;">
      <div style="font-size: 16px ;color: #FF6600;">1799.00</div>
      <div style="font-size: 12px;color:#A4A4A4">智慧家空调会员店    进店></div>
    </div>
  </template>
 
  <template #footer>
   
   
  </template>
 

  <template #num>
    评论数
  </template>
  <template #title>
   <div style="font-size: 14px;color: #333333;">美的移动空调单冷家用一体机1匹KY-25/N1Y-PH   </div>
  </template>
 
  
    
</van-card>

<van-card
thumb="https://pic.midea.cn/smartpic/pic/10675d82727c4a1e974689bb40.jpg"
  desc=" 晒单送电水壶&nbsp;SH15Colour102,晒单后请及时联系客服兑换哟，赠品不可更换（收货信息以及实物）、不可抵现~~   "
>
  <template #tags>
    <van-tag plain type="primary" color="#FF6600">自营</van-tag>
    <van-tag type="primary" color="#FF6600">标签</van-tag>
    <van-tag type="primary" color="#FF6600">热卖</van-tag>
  </template>
  <template #price>
    <div style="flex-direction: column;">
      <div style="font-size: 16px ;color: #FF6600;">2499.00</div>
      <div style="font-size: 12px;color:#A4A4A4">智慧家空调会员店    进店></div>
    </div>
  </template>
 
  <template #footer>
   
   
  </template>
 

  <template #num>
    评论数
  </template>
  <template #title>
   <div style="font-size: 14px;color: #333333;">美的 1.5匹冷暖移动空调一体机KYR-35/N1Y-PD2     </div>
  </template>
 
  
    
</van-card>

<van-card
thumb="https://pic.midea.cn/smartpic/pic/10675d82727c4a1e974689bb40.jpg"
  desc=" 晒单送电水壶&nbsp;SH15Colour102,晒单后请及时联系客服兑换哟,赠品不可更换（收货信息以及实物）、不可抵现~~   "
>
  <template #tags>
    <van-tag plain type="primary" color="#FF6600">自营</van-tag>
    <van-tag type="primary" color="#FF6600">标签</van-tag>
    <van-tag type="primary" color="#FF6600">热卖</van-tag>
  </template>
  <template #price>
    <div style="flex-direction: column;">
      <div style="font-size: 16px ;color: #FF6600;">2699.00</div>
      <div style="font-size: 12px;color:#A4A4A4">智慧家空调会员店    进店></div>
    </div>
  </template>
 
  <template #footer>
   
   
  </template>
 

  <template #num>
    评论数
  </template>
  <template #title>
   <div style="font-size: 14px;color: #333333;">美的 1.5匹冷暖移动空调一体机KYR-35/N1Y-PD2     </div>
  </template>
 
  
    
</van-card>





</div>


</template>

<style lang="less" scoped>

</style>
<style>
:root{
  --van-card-thumb-size:120px;
}
</style>
